<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin">
      <q-card-section class="text-h6">
        <q-item-label lines="1">
          <template v-if="account"> {{ account.nickname }}的 </template>
          报价方案
        </q-item-label>
      </q-card-section>
      <q-card-section class="q-gutter-y-md">
        <q-select
          v-model="data.template.selected"
          :options="data.template.options"
          label="引用模板"
          outlined
          @filter="filterFn"
          ref="templateRef"
        >
          <template v-slot:append>
            <q-icon
              v-if="data.template.selected !== null"
              name="close"
              @click.stop.prevent="data.template.selected = null"
              class="cursor-pointer"
            />
          </template>

          <template v-slot:no-option>
            <q-item>
              <q-item-section class="text-italic text-grey">
                没有可用的模板
              </q-item-section>
            </q-item>
          </template>
        </q-select>
        <q-input
          v-model="data.recReason"
          outlined
          type="textarea"
          label="自荐理由"
          :disable="!!data.template.selected"
        />
      </q-card-section>
      <card-footer-buttons
        @ok="onOKClick"
        @cancel="onCancelClick"
      ></card-footer-buttons>
    </q-card>
  </q-dialog>
</template>

<script>
import { useDialogPluginComponent } from "quasar";
import { computed, reactive, ref } from "vue";
import { useStore } from "vuex";
import CardFooterButtons from "../CardFooterButtons.vue";
import { fetchMarkBookTepList } from "src/assets/fetch";

export default {
  components: { CardFooterButtons },
  emits: [...useDialogPluginComponent.emits],
  props: {
    template: Array,
    categoryId: Number,
  },
  setup(props) {
    const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
      useDialogPluginComponent();
    const $store = useStore();
    const templateRef = ref(null);
    const account = computed(() => $store.state.common.currentSelectedAccount);

    const data = reactive({
      recReason: computed({
        get: () => $store.state.persisted.recReason,
        set: (val) => $store.commit("persisted/setData", { recReason: val }),
      }),
      template: {
        result: null,
        options: computed(() => {
          const tmp = props.template || data.template.result;
          if (!tmp) {
            return tmp;
          }
          return tmp.map((v) => ({ ...v, label: v.tempName }));
        }),
        selected: null,
      },
    });
    return {
      account,
      data,
      dialogRef,
      templateRef,
      onDialogHide,
      onOKClick() {
        const tmp = data.template.selected || { recReason: data.recReason };
        if (!tmp) {
          return;
        }

        const body = {
          tempFlag: 0, // 是否保存为模板      0.否 1.是
          site: 1, // 投标来源 1 pc 2 H5 3 APP
          recReason: tmp.recReason || "",
          process: tmp.process || [],
          ensure: tmp.ensure || [],
          specialSev: tmp.specialSev || [],
          afterSev: tmp.afterSev || [],
          processType: tmp.processType,
          // baseCategoryId: tmp.baseCategoryId,
          // baseCategoryName: tmp.baseCategoryName,
          demandId: "",
          onlineCaseIds: tmp.onlineCaseIds,
          consume: 0, // 消费商机豆
          /**
           * 消耗的商业产品
           * 1 随心包
           * 2 投标易3.0
           * 3 商机豆
           * 4 免费的兼职投标次数
           * 5 兼职易
           */
          bidType: 3,
        };
        onDialogOK(body);
      },
      onCancelClick: onDialogCancel,

      async filterFn(val, update) {
        const done = update;
        if (data.template.options !== null) {
          return update();
        }
        fetchMarkBookTepList(
          props.categoryId,
          $store.getters["common/currentCookie"]
        ).then((tmp) => {
          data.template.result = tmp.data.tempList || [];
          templateRef.value.showPopup();
        });
      },
    };
  },
};
</script>
